import { ChainId } from "@pancakeswap/chains";
import { BoxProps, Svg, SvgProps } from "@pancakeswap/uikit";
import { LogoWrapper } from "./styles";

export const BinanceIcon: React.FC<SvgProps> = (props) => {
  return (
    <Svg viewBox="0 0 20 21" {...props}>
      <g clip-path="url(#clip0_8805_16017)">
        <path
          d="M4.61561 3.58428L9.99508 0.5L15.3745 3.58428L13.3561 4.66856L9.99508 2.75057L6.5467 4.66856L4.61561 3.58428ZM15.2918 7.41572L13.3561 6.33143L9.99508 8.24943L6.5467 6.33143L4.61102 7.41572V9.66629L7.97663 11.5843V15.5023L9.91232 16.6686L11.848 15.5023V11.6708L15.2136 9.75285V7.42027H15.2918V7.41572ZM15.2918 13.5843V11.3337L13.3561 12.5V14.664L15.2918 13.5843ZM16.7217 14.3314L13.3607 16.2494V18.5L18.7448 15.4157V9.25171L16.7263 10.5L16.7217 14.3314ZM14.786 5.50228L16.7217 6.66856V8.91913L18.6574 7.75285V5.50228L16.7217 4.33599L14.786 5.50228ZM7.97663 17.0831V19.3337L9.91232 20.5L11.848 19.3337V17.0831L9.91232 18.2494L7.97663 17.0831ZM4.61102 13.5843L6.5467 14.6686V12.418L4.61102 11.2517V13.5843ZM7.97663 5.50228L9.91232 6.66856L11.9308 5.50228L9.99508 4.33599L7.97663 5.50228ZM3.18569 6.66856L5.20414 5.50228L3.18569 4.33599L1.25 5.50228V7.75285L3.18569 8.91913V6.66856ZM3.18569 10.5L1.25 9.33371V15.4977L6.63406 18.582V16.3314L3.26845 14.4134V10.4954L3.18569 10.5Z"
          fill="white"
        />
      </g>
      <defs>
        <clipPath id="clip0_8805_16017">
          <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
        </clipPath>
      </defs>
    </Svg>
  );
};

export const EthereumIcon: React.FC<SvgProps> = (props) => {
  return (
    <Svg viewBox="0 0 20 21" {...props}>
      <path opacity="0.3" d="M10.058 14.2235L15.75 10.8667L10.058 8.28931V14.2235Z" fill="white" />
      <path d="M9.93507 1.25L4.25 10.6708L9.93507 8.09341V1.25Z" fill="white" />
      <path d="M4.25 11.7511L9.93507 19.7499V15.101L4.25 11.7511Z" fill="white" />
      <path opacity="0.6" d="M9.93507 8.09338L4.25 10.6708L9.93507 14.0275V8.09338Z" fill="white" />
      <path opacity="0.6" d="M15.6268 10.6708L9.93488 1.25V8.09341L15.6268 10.6708Z" fill="white" />
      <path opacity="0.6" d="M9.93494 15.1011V19.75L15.6269 11.7512L9.93494 15.1011Z" fill="white" />
    </Svg>
  );
};

export const ArbitrumIcon: React.FC<SvgProps> = (props) => {
  return (
    <Svg viewBox="0 0 20 21" {...props}>
      <g clip-path="url(#clip0_8805_14669)">
        <path
          d="M10.0296 1.73965C10.0772 1.73965 10.1249 1.7528 10.1676 1.77746L17.4994 6.04379C17.5848 6.09311 17.6374 6.18518 17.6358 6.28218L17.6078 14.7671C17.6078 14.8658 17.5552 14.9562 17.4698 15.0055L10.1101 19.2242C10.069 19.2488 10.0197 19.2604 9.97206 19.2604C9.9244 19.2604 9.87674 19.2472 9.83401 19.2225L2.50227 14.9562C2.41681 14.9069 2.36422 14.8148 2.36586 14.7178L2.3938 6.23285C2.3938 6.13421 2.44639 6.04379 2.53186 5.99447L9.89153 1.77582C9.93262 1.75116 9.98028 1.73965 10.0296 1.73965ZM10.0329 0.500029C9.77155 0.498385 9.51023 0.565792 9.27521 0.700604L1.91554 4.91761C1.44549 5.18723 1.15623 5.68538 1.15295 6.22792L1.12501 14.7129C1.12336 15.2538 1.41098 15.7552 1.87774 16.0281L9.20947 20.2945C9.44285 20.4309 9.70417 20.4983 9.96713 20.5C10.2284 20.5016 10.4898 20.4342 10.7248 20.2994L18.0845 16.0807C18.5545 15.8111 18.8438 15.313 18.8471 14.7704L18.875 6.28711C18.8766 5.74621 18.589 5.24478 18.1223 4.97186L10.7905 0.705536C10.5555 0.56908 10.2942 0.500029 10.0329 0.500029Z"
          fill="white"
        />
        <path
          d="M11.5186 5.12402H10.4437C10.3632 5.12402 10.2908 5.17499 10.2629 5.25062L6.80824 14.727C6.78523 14.7894 6.83125 14.8552 6.89863 14.8552H7.97349C8.05402 14.8552 8.12634 14.8042 8.15428 14.7286L11.6106 5.25062C11.6303 5.18979 11.5843 5.12402 11.5186 5.12402ZM9.63837 5.12402H8.56351C8.48298 5.12402 8.41067 5.17499 8.38273 5.25062L4.92805 14.727C4.90504 14.7894 4.95106 14.8552 5.01845 14.8552H6.09331C6.17384 14.8552 6.24615 14.8042 6.27409 14.7286L9.73041 5.25062C9.75177 5.18979 9.70576 5.12402 9.63837 5.12402ZM11.0304 8.79849C10.9992 8.71464 10.8809 8.71464 10.8496 8.79849L10.2908 10.3307C10.2761 10.3735 10.2761 10.4195 10.2908 10.4623L11.8473 14.7302C11.8752 14.8059 11.9475 14.8568 12.028 14.8568H13.1029C13.1703 14.8568 13.2163 14.7911 13.1933 14.7286L11.0304 8.79849ZM15.0718 14.727L11.9705 6.22225C11.9393 6.13841 11.821 6.13841 11.7897 6.22225L11.2309 7.75451C11.2161 7.79726 11.2161 7.84329 11.2309 7.88604L13.7274 14.7302C13.7554 14.8059 13.8277 14.8568 13.9082 14.8568H14.9831C15.0472 14.8552 15.0948 14.7894 15.0718 14.727Z"
          fill="white"
        />
      </g>
      <defs>
        <clipPath id="clip0_8805_14669">
          <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
        </clipPath>
      </defs>
    </Svg>
  );
};

export const ZKsyncIcon: React.FC<SvgProps> = (props) => {
  return (
    <Svg viewBox="0 0 20 21" {...props}>
      <path d="M11.4348 8.22901L5.73913 12.3015V16.5L0 10.958L5.65217 5.5V8.22901H11.4348Z" fill="white" />
      <path d="M14.3043 9.57252V5.5L20 11L14.3043 16.5V13.729H8.56522L14.3043 9.57252Z" fill="white" />
    </Svg>
  );
};

export const BaseIcon: React.FC<SvgProps> = (props) => {
  return (
    <Svg viewBox="0 0 20 21" {...props}>
      <g clip-path="url(#clip0_8805_14550)">
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M10 16.75C13.4518 16.75 16.25 13.9518 16.25 10.5C16.25 7.04822 13.4518 4.25 10 4.25C6.54822 4.25 3.75 7.04822 3.75 10.5C3.75 13.9518 6.54822 16.75 10 16.75ZM10 20.5C15.5228 20.5 20 16.0228 20 10.5C20 4.97715 15.5228 0.5 10 0.5C4.47715 0.5 0 4.97715 0 10.5C0 16.0228 4.47715 20.5 10 20.5Z"
          fill="white"
        />
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 11.125H0V9.875H11.875V11.125Z" fill="white" />
      </g>
      <defs>
        <clipPath id="clip0_8805_14550">
          <rect width="20" height="20" fill="white" transform="translate(0 0.5)" />
        </clipPath>
      </defs>
    </Svg>
  );
};

const ChainLogoMap = {
  [ChainId.BSC]: <BinanceIcon />,
  [ChainId.ETHEREUM]: <EthereumIcon width={16} />,
  [ChainId.ARBITRUM_ONE]: <ArbitrumIcon width={24} height={24} />,
  [ChainId.ZKSYNC]: <ZKsyncIcon width={16} />,
};

export const ChainLogo = ({ chainId, ...props }: { chainId: keyof typeof ChainLogoMap } & BoxProps) => {
  return <LogoWrapper {...props}>{ChainLogoMap[chainId]}</LogoWrapper>;
};
